<template>
  <div>
    <van-nav-bar
      title="账号安全"
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <router-link to="#">
      <div class="user">
        <span class="user_guli">修改密码</span>
        <span class="my_safety_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="/safety">
      <div class="user">
        <span class="user_guli">人脸识别</span>
        <span class="my_safety_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <p class="safety_she">可通过人脸识别快速进行安全验证</p>
    <router-link to="#">
      <div class="user_safety">
        <span class="user_guli">登录设备管理</span>
        <span class="my_safety_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <p class="safety_she">
      查看并管理登录设备，开启登录安全保护，保障账号安全。
    </p>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">手势密码锁定</span>
        <span class="my_safety_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">安全登录检测</span>
        <span class="my_safety_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">注销账号</span>
        <span class="my_safety_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.replace("/set");
    },
  },
};
</script>

<style lang="stylus">
.user_safety1{
  width 100%
  height 50px
  line-height 50px
  background-color: #909399;
  .user_safe{
    height 30px
    position: relative;
    height: 30px;
    right: 8%;
    margin-left: 50%;
  }
}
.go_back1{
  width 60px
  height 40px
}
.user{
  width 100%
  height 55px
  line-height 55px
  font-size 18px
  margin-bottom 10px
  background-color #fff
  .my_safety_icon{
    float right
    margin-right 5px
    >.icon-fangxiangzuo{
      font-size 22px
    }
  }
}
.user_chang{
  width 100%
  height 40px
  margin-top 10px
  line-height 40px
  font-size 20px
  text-align center
  color black
  background-color #fff
}
.user_guli{
    margin-left 5px
    color black
  }
.user_safety{
  width 100%
  height 55px
  line-height 55px
  font-size 18px
  margin-top 10px
  background-color #fff
  .my_safety_icon{
    float right
    margin-right 5px
    >.icon-fangxiangzuo{
      font-size 20px
    }
  }
}
.safety_she{
  font-size 13px
  color #7e8c8d
  margin-bottom 10px
}
</style>
